<template>
  <div class="error-message">
    <el-result
      :icon="icon"
      :title="title"
      :sub-title="subTitle">
      <template #extra>
        <el-button type="primary" @click="handleRetry">{{ retryText }}</el-button>
      </template>
    </el-result>
  </div>
</template>

<script setup>
import { defineProps, defineEmits } from 'vue'

const props = defineProps({
  title: {
    type: String,
    default: '出错了'
  },
  subTitle: {
    type: String,
    default: '请稍后再试或联系管理员'
  },
  icon: {
    type: String,
    default: 'error'
  },
  retryText: {
    type: String,
    default: '重试'
  }
})

const emit = defineEmits(['retry'])

const handleRetry = () => {
  emit('retry')
}
</script>

<style scoped>
.error-message {
  padding: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style> 